<template>
  <div class="topTitle">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="第一步：完善基础信息"></el-step>
      <el-step title="第二步：完善附件信息"></el-step>
      <el-step title="完成"></el-step>
    </el-steps>
  </div>
</template>

<script>
export default {
  name: 'ImproveProgress',
  props: {
    active: {
      type: Number,
      default: 0,
    },
  },
}
</script>

<style scoped lang="less">
.el-steps {
  background: #fff;
  // padding: 40px 0;
  padding-top: 10px;
  margin: 0 24px;
  padding-bottom: 30px;
}
/* 步骤条 */
.topTitle /deep/ .el-step__head.is-process {
  color: #fff;
  .el-step__icon.is-text {
    border: 2px solid #009588;
    background: #009588;
  }
}

.topTitle /deep/ .el-step__head.is-success,
.topTitle /deep/ .el-step__title.is-success {
  color: #009588;
}

.topTitle /deep/ .el-step__head.is-success .el-step__icon.is-text {
  border-color: #009588;
}

.topTitle /deep/ .el-step__line {
  border-color: #009588;
}

.topTitle /deep/ .el-step__title.is-process {
  color: #009588;
}
</style>
